<template>
  <div id="app" style="font-size: 26px; font-weght: bold; padding: 30px">
    <div class="head">
      <div class=" " style="width: 100%">
        <div>
          <ul class="bianjieEvery">
            <li
              class="bianjiLi"
              v-for="(item, index) in caozuoList"
              :key="index"
            >
              <div class="center">
                <div class="left">
                  <span>{{ item.text }}</span>
                  <div class="unitBox">
                    <span class="span">{{ item.todayCount }}</span
                    >{{ item.unit }}
                  </div>
                  <!-- <span class="span">{{
                    item.yesterday + " " + item.yesterdayCount
                  }}</span> -->
                  <span>{{ item.yesterday }}</span>
                  <div class="biteBox">
                    <div class="yesterdayBox" style="display: flex">
                      <span class="span"> {{ item.rate }}</span
                      >{{ item.unit }}
                    </div>
                    <el-image :src="item.imgSrc"></el-image>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <el-card>
      <p>未处理模块</p>
      <div class="unprocessedBox">
        <div
          v-for="(item, index) in unprocessedList"
          :key="index"
          class="unprocessedItem"
          @click="toRoute(item.routeName)"
        >
          <p>{{ item.text }}</p>
          <div>{{ item.count }}</div>
        </div>
      </div>
    </el-card>

    <!-- 待处理订单 -->
    <div class="cardOutBox">
      <!-- 订单统计折线图 -->
      <el-card class="box-card">
        <!-- <div slot="header" class="timeBox"></div> -->
        <div>
          <div slot="header" class="timeBox">
            <p>销售占比额</p>
            <div
              :class="pieTime == 'day' ? 'pieClickAfter' : ''"
              @click="dayPie()"
            >
              日
            </div>
            <div
              :class="pieTime == 'week' ? 'pieClickAfter' : ''"
              @click="weekPie()"
            >
              周
            </div>
            <div
              :class="pieTime == 'month' ? 'pieClickAfter' : ''"
              @click="monthPie()"
            >
              月
            </div>
            <div
              :class="pieTime == 'year' ? 'pieClickAfter' : ''"
              @click="yearPie()"
            >
              年
            </div>
          </div>
          <div id="EChart" style="width: 100%; height: 500px"></div>
        </div>
      </el-card>
      <el-card class="box-card">
        <!-- <div slot="header" class="clearfix">
          <span class="title">近七日收入</span>
        </div> -->
        <div>
          <div id="menber" style="width: 100%; height: 500px"></div>
        </div>
      </el-card>
    </div>
    <div class="footerBox">
      <el-card>
        <div class="tableBox">
          <div class="timeBox">
            <p>商品销量</p>
            <div
              :class="countTime == 'day' ? 'pieClickAfter' : ''"
              @click="day()"
            >
              日
            </div>
            <div
              :class="countTime == 'week' ? 'pieClickAfter' : ''"
              @click="week()"
            >
              周
            </div>
            <div
              :class="countTime == 'month' ? 'pieClickAfter' : ''"
              @click="month()"
            >
              月
            </div>
          </div>
          <p class="timeP">选择时间</p>
          <el-date-picker
            v-model="is_time"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            @change="timeChange()"
          >
          </el-date-picker>
        </div>
        <el-table
          v-loading="loading1"
          ref="multipleTable"
          :data="tableDatat1"
          border
          style="width: 100%"
          class="oversc"
        >
          <el-table-column
            type="index"
            prop="ctime"
            align="center"
            label="排名"
            width="70px"
          >
          </el-table-column>
          <el-table-column prop="name" align="center" label="商品名称">
          </el-table-column>
          <el-table-column prop="nums_cou" align="center" label="销量">
          </el-table-column>
        </el-table>
      </el-card>
      <el-card>
        <div class="tableBox">
          <div class="timeBox">
            <p>商品销售额</p>
            <div
              :class="moneyTime == 'day' ? 'pieClickAfter' : ''"
              @click="day1()"
            >
              日
            </div>
            <div
              :class="moneyTime == 'week' ? 'pieClickAfter' : ''"
              @click="week1()"
            >
              周
            </div>
            <div
              :class="moneyTime == 'month' ? 'pieClickAfter' : ''"
              @click="month1()"
            >
              月
            </div>
          </div>
          <p class="timeP">选择时间</p>
          <el-date-picker
            v-model="is_time1"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            @change="timeChange1()"
          >
          </el-date-picker>
        </div>
        <el-table
          v-loading="loading2"
          ref="multipleTable"
          :data="tableDatat2"
          border
          style="width: 100%"
          class="oversc"
        >
          <el-table-column
            type="index"
            prop="ctime"
            align="center"
            label="排名"
            width="70px"
          >
          </el-table-column>
          <el-table-column prop="name" align="center" label="商品名称">
          </el-table-column>
          <el-table-column prop="nums_amount" align="center" label="销售额">
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  getFirstPageTop,
  getFirstPageMiddle,
  getFirstPageSalesVolume,
  getFirstPageSalesRevenue,
} from "../../../../utils/main";
export default {
  components: {},
  data() {
    return {
      time1: "",
      tableDatat1: [],
      tableDatat2: [],
      dataList: {},
      // img1: require("../../../../assets/image/firstPageImg/Frame (1).png"),
      // img2: require("../../../../assets/image/firstPageImg/Frame (2).png"),
      // img3: require("../../../../assets/image/firstPageImg/Frame 2801.png"),
      // img4: require("../../../../assets/image/firstPageImg/Frame.png"),
      day_pie: "",
      week_pie: "",
      month_pie: "",
      year_pie: "",
      is_day: "",
      is_week: "",
      is_month: "",
      is_time: "",
      is_day1: "",
      is_week1: "",
      is_month1: "",
      is_time1: "",
      loading1: false,
      loading2: false,
      pieTime: "",
      countTime: "",
      moneyTime: "",
      unprocessedList: [
        { text: "超市", count: "1", routeName: "/supermarketOrder" },
        { text: "送水", count: "2", routeName: "/Index/OrderList" },
        { text: "快修", count: "2", routeName: "/dingdan/yhxd" },
        { text: "建材", count: "3", routeName: "/jianCaiMain" },
        { text: "房地产", count: "4", routeName: "/house/PropertyManagement" },
      ],
      token: sessionStorage.getItem("token"),
      orderxAxis: {},
      orderLegend: {},
      orderSeries: [],
      PieArr: [],
      orderLoading: false,
      menberxAxis: { data: [], type: "" },
      menberLegend: {},
      menberSeries: [],
      caozuoList: [
        {
          icon: "el-icon-s-order",
          text: "今日支付订单数",
          yesterday: "昨日支付订单数",
          todayCount: "",
          yesterdayCount: "",
          rate: "",
          unit: "单",
          imgSrc: require("../../../../assets/image/firstPageImg/Frame 2801.png"),
        },
        {
          icon: "el-icon-s-check",
          text: "今日支付人数",
          yesterday: "昨日支付人数",
          todayCount: "",
          yesterdayCount: "",
          rate: "",
          unit: "人",
          imgSrc: require("../../../../assets/image/firstPageImg/Frame.png"),
        },
        {
          icon: "el-icon-coin",
          text: "今日销售额",
          yesterday: "昨日销售额",
          todayCount: "",
          yesterdayCount: "",
          rate: "",
          unit: "元",
          imgSrc: require("../../../../assets/image/firstPageImg/Frame (1).png"),
        },
        {
          icon: "el-icon-set-up",
          text: "今日新增用户",
          yesterday: "昨日新增用户",
          todayCount: "",
          yesterdayCount: "",
          rate: "",
          unit: "人",
          imgSrc: require("../../../../assets/image/firstPageImg/Frame (2).png"),
        },
      ],
      radio2: "上海",
      token: sessionStorage.getItem("token"),
    };
  },
  methods: {
    // 获取顶部数据
    async getFirstPageList() {
      let res = await getFirstPageTop(this.token);
      if (res.data.status == true) {
        this.dataList = res.data.data || {};
        // 今日数量
        this.caozuoList[0].todayCount =
          this.dataList.topCount.today_order_count;
        this.caozuoList[1].todayCount = this.dataList.topCount.today_pay_count;
        this.caozuoList[2].todayCount =
          this.dataList.topCount.today_order_amount;
        this.caozuoList[3].todayCount = this.dataList.topCount.today_user_count;
        // 昨天数量
        this.caozuoList[0].yesterdayCount =
          this.dataList.topCount.yesterday_order_count;
        this.caozuoList[1].yesterdayCount =
          this.dataList.topCount.yesterday_pay_count;
        this.caozuoList[2].yesterdayCount =
          this.dataList.topCount.yesterday_order_amount;
        this.caozuoList[3].yesterdayCount =
          this.dataList.topCount.yesterday_user_count;
        // 额度
        this.caozuoList[0].rate = this.dataList.topCount.yesterday_order_count;
        this.caozuoList[1].rate = this.dataList.topCount.yesterday_pay_count;
        this.caozuoList[2].rate = this.dataList.topCount.yesterday_order_amount;
        this.caozuoList[3].rate = this.dataList.topCount.yesterday_user_count;
        // 未处理模块
        this.unprocessedList[0].count = this.dataList.mainTopCount.mark_count;
        this.unprocessedList[1].count = this.dataList.mainTopCount.water_count;
        this.unprocessedList[2].count = this.dataList.mainTopCount.build_count;
        this.unprocessedList[3].count =
          this.dataList.mainTopCount.materials_count;
        this.unprocessedList[4].count = this.dataList.mainTopCount.house_count;
        // 折线图数据
        let timeArr = [];
        let dataArr = [];
        this.dataList.sevenCount.forEach((item) => {
          timeArr.push(item.time);
          dataArr.push(item.count);
        });
        console.log("dataArr", dataArr);
        this.menberxAxis.data = timeArr;
        this.menberxAxis.type = "category";
        // console.log("aaa", this.menberxAxis);
        this.menberSeries.push({
          data: dataArr,
          type: "line",
          // 拐点大小
          symbolSize: 2,
          // 折线颜色
          lineStyle: { color: "#FF9A2E" },
          // 拐点颜色
          itemStyle: {
            borderColor: "#FF9A2E", //拐点正常情况的颜色
            opacity: 0, //正常情况下，不显示拐点
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(255, 154, 46, 1)",
              },
              {
                offset: 1,
                color: "rgba(255, 154, 46, 0)",
              },
            ]),
          },
        });
        // console.log("bbb", this.menberSeries);
        this.getMenber();
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/login");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          // this.loading = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },
    // 未处理模块
    toRoute(routeLink) {
      this.$router.push(routeLink);
    },
    // 饼图
    dayPie() {
      this.pieTime = "day";
      (this.day_pie = 1),
        (this.week_pie = ""),
        (this.month_pie = ""),
        (this.year_pie = ""),
        this.getOrder();
    },
    weekPie() {
      this.pieTime = "week";
      (this.day_pie = ""),
        (this.week_pie = 1),
        (this.month_pie = ""),
        (this.year_pie = ""),
        this.getOrder();
    },
    monthPie() {
      this.pieTime = "month";
      (this.day_pie = ""),
        (this.week_pie = ""),
        (this.month_pie = 1),
        (this.year_pie = ""),
        this.getOrder();
    },
    yearPie() {
      this.pieTime = "year";
      (this.day_pie = ""),
        (this.week_pie = ""),
        (this.month_pie = ""),
        (this.year_pie = 1),
        this.getOrder();
    },
    // 商品销售量
    day() {
      this.countTime = "day";
      (this.is_day = 1),
        (this.is_week = ""),
        (this.is_month = ""),
        (this.is_time = "");
      this.getFirstPageFoot1();
    },
    week() {
      this.countTime = "week";
      (this.is_day = ""),
        (this.is_week = 1),
        (this.is_month = ""),
        (this.is_time = "");
      this.getFirstPageFoot1();
    },
    month() {
      this.countTime = "month";
      (this.is_day = ""),
        (this.is_week = ""),
        (this.is_month = 1),
        (this.is_time = "");
      this.getFirstPageFoot1();
    },
    timeChange() {
      this.countTime = "";
      this.is_day = "";
      this.is_week = "";
      this.is_month = "";
      if (this.is_time == null) {
        this.is_time = "";
      }
      this.getFirstPageFoot1();
    },
    // 商品销售额
    day1() {
      this.moneyTime = "day";
      (this.is_day1 = 1),
        (this.is_week1 = ""),
        (this.is_month1 = ""),
        (this.is_time1 = "");
      this.getFirstPageFoot2();
    },
    week1() {
      this.moneyTime = "week";
      (this.is_day1 = ""),
        (this.is_week1 = 1),
        (this.is_month1 = ""),
        (this.is_time1 = "");
      this.getFirstPageFoot2();
    },
    month1() {
      this.moneyTime = "month";
      (this.is_day1 = "1"),
        (this.is_week1 = ""),
        (this.is_month1 = 1),
        (this.is_time1 = "");
      this.getFirstPageFoot2();
    },
    timeChange1() {
      this.moneyTime = "";
      this.is_day1 = "";
      this.is_week1 = "";
      this.is_month1 = "";
      if (this.is_time1 == null) {
        this.is_time1 = "";
      }
      this.getFirstPageFoot2();
    },
    async getFirstPageFoot1() {
      this.loading1 = true;
      let res = await getFirstPageSalesVolume(
        this.token,
        this.is_day,
        this.is_week,
        this.is_month,
        this.is_time
      );
      if (res.data.status) {
        this.tableDatat1 = res.data.data || [];
        // this.total = res.data.data.count;
        let timer = setTimeout(() => {
          this.loading1 = false;
          clearTimeout(timer);
        }, 400);
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/login");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading1 = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },

    async getFirstPageFoot2() {
      this.loading2 = true;
      let res = await getFirstPageSalesRevenue(
        this.token,
        this.is_day1,
        this.is_week1,
        this.is_month1,
        this.is_time1
      );
      if (res.data.status) {
        this.tableDatat2 = res.data.data || [];
        // this.total = res.data.data.count;
        let timer = setTimeout(() => {
          this.loading2 = false;
          clearTimeout(timer);
        }, 400);
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/login");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading2 = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },

    getOrder() {
      getFirstPageMiddle(
        this.token,
        this.day_pie,
        this.week_pie,
        this.month_pie,
        this.year_pie
      )
        .then((res) => {
          if (res.data.status) {
            this.PieArr = res.data.data;
            this.PieArr.forEach((item) => {
              if (item.name == "水站") {
                item.itemStyle = { color: "#376DF7" };
              } else if (item.name == "超市") {
                item.itemStyle = { color: "#6750AA" };
              } else if (item.name == "建材") {
                item.itemStyle = { color: "#53B997" };
              } else if (item.name == "快修") {
                item.itemStyle = { color: "#F8C541" };
              }
            });
            // console.log("PieArr", this.PieArr);
            // this.orderLegend = res.data.data.legend;
            // this.orderSeries = res.data.data.series[0];
            this.getRenderer();
          } else if ((res.data.data.message = "请重新登录")) {
            this.$router.push("/login");
          }
        })
        .catch((err) => {
          if (err.message == "Network Error") {
            this.$message.error("网络错误，请重新链接");
          } else if ((res.data.data.message = "请重新登录")) {
            this.$router.push("/login");
          } else {
            this.$message.error("请求失败");
          }
        });
    },
    getRenderer() {
      // 基于准备好的dom，初始化echarts实例
      let EChart = this.$echarts.init(document.getElementById("EChart"));
      // 配置参数
      let config = {
        // title: { text: "近7天已支付订单量统计" },
        tooltip: {
          trigger: "item",
        },
        // xAxis: this.orderxAxis,
        // yAxis: {},
        toolbox: {
          show: true,
          feature: {
            // mark: { show: true },
            // dataView: { show: true, readOnly: false },
            // restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            // name: "Access From",
            type: "pie",
            radius: "50%",
            data: this.PieArr,
            //  [
            //   { value: 1048, name: "超市" },
            //   { value: 735, name: "送水" },
            //   { value: 580, name: "建材" },
            //   { value: 484, name: "房地产" },
            //   // { value: 300, name: "Video Ads" },
            // ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 设置参数
      EChart.setOption(config);
    },
    getMenber() {
      let EChart = this.$echarts.init(document.getElementById("menber"));
      let config1 = {
        title: {
          text: "最近七天订单量统计",
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: this.menberxAxis,
        yAxis: { type: "value" },

        series: this.menberSeries,
      };
      EChart.setOption(config1);
    },
    // router(e) {
    //   this.$router.push(e);
    // },
    getSocketData(res) {
      console.log(res);
      if (res.detail.data === "success" || res.detail.data === "heartBath")
        return;
    },
    // todetail() {
    //   this.$router.push("/login");
    // },
  },

  mounted() {
    this.getFirstPageList();
    this.getOrder();
    this.getRenderer();
    this.getMenber();
    // 在生命周期中调用 getRenderer 方法
    this.getFirstPageFoot1();
    this.getFirstPageFoot2();
  },
};
</script>
<style scoped>
a {
  color: #333;
  text-decoration: none;
}
.text {
  font-size: 14px;
}
#app {
  width: 100%;
  overflow: scroll;
}
#app::-webkit-scrollbar {
  display: none;
}
.head {
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}
.clearfix .title {
  font-size: 15px;
}
.cardOutBox {
  margin: 20px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.box-card .el-card__header {
  padding: 10px 20px;
}
.cardOutBox .box-card {
  width: 49%;
  height: 520px;
}
.box-card .p1 {
  font-weight: 700;
  margin-left: 10px;
  padding-bottom: 25px;
  border-bottom: 1px solid #666;
}
.box-card .fenLei {
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
}
.fenLei div {
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.bianjieEvery,
.daibanEvery {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.daibanLi {
  cursor: pointer;
  width: 50%;
  list-style: none;
  transition: 0.3s;
}
.bianjieEvery .bianjiLi {
  cursor: pointer;
  padding: 20px;
  width: 23%;
  height: 192px;
  /* border: 1px solid #838383; */
  box-shadow: 1px 1px 3px #cecdcd;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  /* transition: 0.3s; */
  overflow: hidden;
  border-radius: 8px;
}
.bianjiLi .center {
  width: 100%;
  font-size: 18px;
  color: #86909c;
  /* height: 90px; */
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
}
.center .unitBox {
  display: flex;
  height: 48px;
  align-items: center;
}
.center .biteBox {
  display: flex;
  height: 54px;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}
.yesterdayBox {
  display: flex;
  align-items: center;
}
.biteBox .el-image {
  width: 54px;
  height: 54px;
}
.center .left {
  width: 100%;
}
.bianjieEvery .bianjiLi:hover,
.daibanLi:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.bianjiLi a {
  display: block;
  width: 90%;
}
.bianjiLi .icon {
  width: 20%;
  display: block;
  text-align: center;
  height: 100%;
  line-height: 90px;
  border-radius: 2px;
  font-size: 30px !important;
  background-color: #f8f8f8;
  color: #333;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.span {
  display: block;
  color: #f96422;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 20px;
  font-size: 32px;
}
.unprocessedBox {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
}
.unprocessedItem {
  width: 140px;
  height: 130px;
  border: 1px solid rgb(211, 211, 211);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 8px;
}
.unprocessedItem div {
  font-size: 24px;
  font-weight: 700;
  color: #0560fd;
}
.timeBox {
  display: flex;
  font-size: 20px;
  font-weight: 700;
  align-items: center;
}
.timeBox div {
  font-size: 12px;
  font-weight: normal;
  border: 1px solid #f96422;
  color: #f96422;
  background-color: rgba(249, 100, 34, 0.1);
  border-radius: 40px;
  box-sizing: border-box;
  width: 52px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  margin-left: 10px;
}
.timeBox .pieClickAfter {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(249, 100, 34, 1);
}
.tableBox .timeP {
  font-size: 18px;
  margin-left: 20px;
  margin-right: 10px;
}
.tableBox {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  margin-bottom: 10px;
}
.footerBox {
  display: flex;
  justify-content: space-between;
}
.footerBox .el-card {
  width: 49%;
}
</style>
